<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>病床信息管理</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 自定义样式 */
    :root {
      --primary: #3b82f6;
      --accent: #2563eb;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      padding: 0.75rem 1.5rem;
      background-color: var(--primary);
      color: white;
      border-radius: 0.375rem;
      transition: background-color 0.2s ease;
    }
    .btn:hover {
      background-color: var(--accent);
    }
    .table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1.5rem;
    }
    .table th,
    .table td {
      padding: 1rem;
      border: 1px solid #e5e7eb;
    }
    .table th {
      background-color: #f3f4f6;
      text-align: left;
    }
    .table-striped tr:nth-child(even) {
      background-color: #f9fafb;
    }
    .edit-link {
      color: var(--primary);
      margin-right: 1rem;
    }
    .edit-link:hover {
      text-decoration: underline;
    }
    .delete-link {
      color: #ef4444;
    }
    .delete-link:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
<div class="container mx-auto px-4 py-8 max-w-4xl">
  <h1 class="text-3xl font-bold text-gray-800 mb-4">病床信息管理</h1>
  <a th:href="@{/admin/bed/add}" class="btn">
    <i class="fa fa-plus mr-2"></i> 添加新病床
  </a>

  <!-- 查询表单 -->
  <form th:action="@{/admin/bed/search}" method="get" class="search-form">
    <input type="text" name="roomNumber" placeholder="请输入病房号" class="search-input" />
    <button type="submit" class="search-button">
      <i class="fa fa-search" aria-hidden="true"></i> 查询病床
    </button>
  </form>

  <!-- 病床卡片 -->
  <div th:if="${!#maps.isEmpty(groupedBeds)}">
    <div th:each="roomNumber, stat : ${groupedBeds.keySet()}" class="bg-white rounded-lg shadow-md p-4 mb-4">
      <h2 class="text-xl font-bold text-gray-800 mb-2">病房号: <span th:text="${roomNumber}"></span></h2>
      <table class="table table-striped">
        <thead>
        <tr>
          <th>病床ID</th>
          <th>床位号</th>
          <th>状态</th>
          <th>患者ID</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="bed : ${groupedBeds.get(roomNumber)}">
          <td th:text="${bed.id}">病床ID</td>
          <td th:text="${bed.bedNumber}">床位号</td>
          <td th:text="${bed.status}">状态</td>
          <td th:text="${bed.patientId} ?: '--'">患者ID</td>
          <td class="text-center">
            <div class="action-links">
              <a th:href="@{/admin/bed/edit/{id}(id=${bed.id})}" class="edit-link" title="编辑">
                <i class="fa fa-edit"></i>
              </a>
              <a th:href="@{/admin/bed/delete/{id}(id=${bed.id})}" class="delete-link" title="删除">
                <i class="fa fa-trash"></i>
              </a>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div th:if="${#maps.isEmpty(groupedBeds)}">
    <p class="text-center text-gray-600">暂无病床信息</p>
  </div>
</div>
</body>
</html>